1 00:00:02,460 --> 00:00:07,530 Sekarang, perlu disebutkan bahwa saya juga menyinggung pendapat Hooke sepanjang kursus ini, dan beberapa di antaranya 2 00:00:07,530 --> 00:00:10,530 semua kait menyelami Anda lebih dalam di modul ini. 3 00:00:10,560 --> 00:00:15,690 Apakah Hoxha telah disebutkan sepanjang kursus ini, tetapi saya selalu menyebutkan bahwa kita akan mendalaminya 4 00:00:15,690 --> 00:00:16,239 itu nanti. 5 00:00:16,260 --> 00:00:18,430 Nah, sekarang sudah mati nanti. 6 00:00:18,540 --> 00:00:20,570 Sekarang kita akan melakukannya, David, lebih terinci. 7 00:00:21,210 --> 00:00:24,420 Dan mari kita mulai dengan bahan Jaspal asing disana. 8 00:00:24,420 --> 00:00:25,710 Kami punya beberapa masukan. 9 00:00:26,220 --> 00:00:35,330 Dan satu hal yang biasanya kami lakukan di sini adalah kami mengikat masukan yang dimasukkan pengguna ke suatu keadaan, ke keadaan tertentu 10 00:00:35,340 --> 00:00:41,310 properti status, dan kami memperbarui status tersebut pada setiap penekanan tombol dan kemudian mengirimkan nilainya kembali ke input. 11 00:00:41,850 --> 00:00:44,490 Itulah dua ikatan yang akan Anda pelajari dalam kursus ini. 12 00:00:44,490 --> 00:00:46,870 Dan kami melakukan ini berkali-kali saat kami bekerja dengan masukan. 13 00:00:47,490 --> 00:00:53,700 Saya ingin melakukan hal yang sama di sini karena pada akhirnya semuanya mulai menghilang saat kami mengumpulkan pengguna 14 00:00:53,700 --> 00:00:59,580 masukan agar kita dapat membuat tombol tambah bahan berfungsi agar kita dapat melakukan sesuatu yang berguna bila ada 15 00:00:59,580 --> 00:01:00,390 tombol ditekan. 16 00:01:01,080 --> 00:01:07,140 Sekarang, jika Anda tidak tahu tentang Hooke atau jika Anda ingin menggunakan reaksi enam belas koma tujuh atau lebih lama, 17 00:01:07,530 --> 00:01:12,510 maka Anda harus mengubahnya menjadi komponen Berbasis Kelas dan menggunakan status dan menyetel status di sana. 18 00:01:13,230 --> 00:01:15,470 Sekarang dengan react hooks, Anda tidak perlu melakukan itu. 19 00:01:15,480 --> 00:01:20,910 Sebagai gantinya, Anda dapat mengimpor sesuatu yang baru dari reaksi dengan tidak hanya mengimpor ekspor default saja 20 00:01:20,910 --> 00:01:27,350 objek reaksi itu, tetapi dengan mengimpor ekspor bernama dan itu adalah status penggunaan. 21 00:01:27,960 --> 00:01:32,550 Saya sebutkan bahwa semua kait ini dimulai dengan penggunaan dan kemudian memiliki berbagai nama. 22 00:01:32,700 --> 00:01:39,900 Jadi ini adalah status penggunaan dan ini mungkin merupakan kait inti yang disediakan oleh REACT. 23 00:01:40,230 --> 00:01:43,500 Ini memungkinkan kita untuk mengelola komponen status dan fungsional. 24 00:01:43,890 --> 00:01:49,690 Cara kerjanya sedikit berbeda dengan komponen status dan Berbasis Kelas, tetapi kita akan melihat perbedaannya sebentar lagi. 25 00:01:50,430 --> 00:01:54,210 Jadi bagaimana kita menggunakannya ketika kita masuk ke komponen fungsional kita? 26 00:01:54,210 --> 00:01:55,020 Dan itu penting. 27 00:01:55,020 --> 00:02:01,800 Anda harus menggunakannya di badan komponen fungsional Anda, katakanlah di sini dan kami menyebutnya status penggunaan. 28 00:02:02,220 --> 00:02:03,990 Namun, hal itu saja tidak banyak membantu. 29 00:02:04,620 --> 00:02:11,550 Status penggunaan dapat diinisialisasi dengan status default dan status utang dapat berupa apa saja, dapat berupa objek, 30 00:02:11,550 --> 00:02:16,740 bisa berupa array, bisa berupa angka, bisa berupa string, boolean bisa berupa nilai apa pun. 31 00:02:16,740 --> 00:02:18,180 Itu tidak harus berupa objek. 32 00:02:18,180 --> 00:02:19,540 Nilainya bisa berapa pun. 33 00:02:20,310 --> 00:02:26,930 Jadi di sini kita bisa membuat negara baru yang harus mengatur input judul dan jumlahnya. 34 00:02:27,630 --> 00:02:29,910 Jadi mari kita buat objek lagi di sini. 35 00:02:29,910 --> 00:02:31,290 Tidak harus menjadi objek. 36 00:02:31,290 --> 00:02:37,140 Saya memilih untuk menggunakan satu di sini karena saya memiliki dua nilai yang ingin saya kelola dan itu adalah judul. 37 00:02:37,680 --> 00:02:42,810 Dan awalnya itu adalah string dan jumlah kosong dan mari kita atur jumlah juga ke string kosong. 38 00:02:42,900 --> 00:02:47,640 Sekarang, Anda dapat berargumen bahwa ini seharusnya menyimpan angka dan karenanya Anda ingin menyetelnya ke nol atau semacamnya 39 00:02:47,640 --> 00:02:48,630 awalnya seperti itu. 40 00:02:49,080 --> 00:02:55,560 Namun sebenarnya mengelola ini akan lebih mudah jika kita mengatakan pada string karena memasukkan elemen, nilainya 41 00:02:55,560 --> 00:02:59,010 elemen input selalu berupa string, meskipun bertipe. 42 00:02:59,010 --> 00:03:01,260 Tidak, kami akan selalu mendapatkan string. 43 00:03:01,260 --> 00:03:06,480 Jika kita ingin bekerja dengan angka di aplikasi kita, maka kita cukup mengonversi nilai tersebut 44 00:03:06,480 --> 00:03:07,620 kapanpun kita menggunakannya. 45 00:03:07,860 --> 00:03:13,650 Namun ketika kita menyadari saat kita mengelolanya, mengelolanya sebagai string menghindari beberapa efek samping yang aneh 46 00:03:13,650 --> 00:03:16,860 kami mungkin tidak dapat mengedit nilai ini sesuai keinginan kami. 47 00:03:17,250 --> 00:03:19,920 Jadi kedua nilai di sini adalah string. 48 00:03:20,250 --> 00:03:24,300 Dan sekarang, tentu saja, pertanyaannya adalah apa manfaatnya bagi kita? 49 00:03:24,300 --> 00:03:26,790 Apa gunanya panggilan negara ini? 50 00:03:26,910 --> 00:03:32,790 Karena hanya itu saja, tentu saja, tidak akan menghubungkan antara keadaan yang sedang kita coba 51 00:03:32,790 --> 00:03:38,190 untuk mengelola di sini dan masukan kami sekarang menggunakan status sebenarnya kami mengembalikan sesuatu. 52 00:03:38,820 --> 00:03:44,460 Ini mungkin rumit untuk dibaca di sini, tetapi pada akhirnya ini menjelaskan bagaimana fungsi menggunakan negara 53 00:03:44,460 --> 00:03:45,940 fungsi didefinisikan. 54 00:03:46,200 --> 00:03:52,860 Dan setelah titik dua ini di sini kita melihat nilai kembalian dan kita melihat bahwa nilai kembalian sebenarnya adalah sebuah array 55 00:03:53,280 --> 00:03:56,160 dan itu adalah array dengan tepat dua elemen. 56 00:03:56,160 --> 00:04:04,740 Dan yang penting, status penggunaan dibangun di hook, selalu mengembalikan array dengan tepat dua elemen. 57 00:04:05,730 --> 00:04:13,260 Elemen pertama adalah snapshot status Anda saat ini, dan kapan pun status Anda diperbarui 58 00:04:13,260 --> 00:04:16,810 Saya akan kembali lagi sebentar lagi, komponen ini akan dibangun kembali. 59 00:04:16,829 --> 00:04:23,460 Jadi fungsi komponen ini benar-benar dijalankan dan menggunakan state, tentunya ada untuk semua yang dieksekusi 60 00:04:23,460 --> 00:04:23,880 lagi. 61 00:04:23,880 --> 00:04:31,200 Namun bereaksi secara internal menyimpan status yang telah Anda konfigurasikan dengan bantuan status penggunaan untuk komponen ini 62 00:04:31,200 --> 00:04:37,770 dan tidak akan menginisialisasi ulang, melainkan menggunakan status yang mengelola status ini terlepas dari komponen Anda, 63 00:04:37,770 --> 00:04:43,530 jadi bisa dikatakan sangat independen dari komponen Anda, sehingga negara dapat bertahan dari render komponen ini, 64 00:04:43,650 --> 00:04:49,060 sehingga negara bertahan ketika fungsi komponen dijalankan lagi dan oleh karena itu status penggunaan tetap ada 65 00:04:49,080 --> 00:04:50,340 nilai pertama yang dikembalikan. 66 00:04:50,340 --> 00:04:57,090 Ini adalah cuplikan status Anda saat ini dan ini adalah cuplikan status saat ini untuk siklus Rivendell ini 67 00:04:57,090 --> 00:04:57,570 komponen. 68 00:04:58,170 --> 00:05:01,740 Artinya saat Anda memperbarui status, Anda akan mendapatkan status terbaru di sini. 69 00:05:01,920 --> 00:05:05,610 Jadi Anda kembali ke tengah hujan, kata Anda dan Dederer memiliki dua elemen di dalamnya. 70 00:05:05,610 --> 00:05:10,950 Elemen pertama selalu merupakan cuplikan status Anda saat ini, pernah menjadi status awal atau jika Anda mengubahnya, 71 00:05:10,950 --> 00:05:12,000 keadaan yang diperbarui. 72 00:05:12,510 --> 00:05:15,810 Tentu saja hal ini membawa kita pada pertanyaan, bagaimana cara mengubah keadaan? 73 00:05:15,810 --> 00:05:17,070 Bagaimana cara memperbarui status? 74 00:05:17,550 --> 00:05:21,030 Dan di situlah elemen kedua dalam kekacauan berguna. 75 00:05:21,060 --> 00:05:24,870 Seperti yang saya sebutkan, array ini selalu memiliki dua elemen. 76 00:05:25,200 --> 00:05:27,410 Elemen pertama adalah cuplikan status Anda saat ini. 77 00:05:27,600 --> 00:05:32,360 Elemen kedua adalah fungsi yang memungkinkan Anda memperbarui status Anda saat ini. 78 00:05:32,670 --> 00:05:39,300 Jadi tahun ini, benda yang tampak aneh ini, benda yang dikirim ke sini, itulah fungsi yang akan selalu ada 79 00:05:39,300 --> 00:05:46,380 menjadi fungsi yang dapat Anda panggil dengan data baru untuk negara bagian Anda guna memperbarui status tersebut. 80 00:05:47,160 --> 00:05:53,160 Jadi oleh karena itu, apa yang bisa kita lakukan di sini, kita bisa menyimpan array ini dengan tepat dua elemen dalam sebuah variabel 81 00:05:53,160 --> 00:05:57,630 atau dalam konstanta di sini, sebenarnya, karena untuk siklus render ini, tidak akan berubah. 82 00:05:57,630 --> 00:06:01,500 Oleh karena itu, ini bisa berupa konstanta dan semuanya disebut sebagai status masukan. 83 00:06:01,500 --> 00:06:02,640 Nama sepenuhnya terserah Anda. 84 00:06:02,640 --> 00:06:09,480 Namun pada akhirnya di sini kami mengelola semua yang kami perlukan untuk mengelola kondisi sumur kami untuk dua masukan ini, 85 00:06:09,480 --> 00:06:10,950 maka nama negara masukan. 86 00:06:11,890 --> 00:06:18,310 Sekarang, apakah kita menyimpan array kita dengan snapshot status dan fungsi pembaruan status di sini dalam status masukan, 87 00:06:18,610 --> 00:06:23,860 kita dapat menghubungkannya ke masukan kita dan di sana saya akan menggunakan pendekatan serupa yang saya tunjukkan sebelumnya dalam kursus ini 88 00:06:23,860 --> 00:06:30,040 dengan pengikatan dua arah pada akhirnya, tempat kita mengikat nilai, sering kali dimasukkan ke snapshot status saat ini 89 00:06:30,040 --> 00:06:34,180 sehingga kita meneruskan keadaan saat ini kembali ke masukan, bisa dikatakan begitu. 90 00:06:34,540 --> 00:06:37,210 Dan saya melakukan ini hanya dengan mengacu pada status masukan. 91 00:06:37,360 --> 00:06:42,940 Dan kemudian elemen pertama, ingat, status masukan adalah array dengan tepat dua elemen dan yang pertama 92 00:06:42,940 --> 00:06:46,470 elemen di Indeks nol akan menjadi snapshot keadaan saat ini. 93 00:06:46,810 --> 00:06:50,500 Jadi baiklah, apa yang ingin kita masukkan kembali menjadi masukan. 94 00:06:50,710 --> 00:06:53,760 Sekarang, tentu saja, keadaan kita adalah sebuah objek, meskipun bukan sebuah string. 95 00:06:54,070 --> 00:07:01,450 Jadi untuk input judul disini, saya ingin mengakses input state zero DOT title karena state kita adalah sebuah objek 96 00:07:01,450 --> 00:07:09,280 dengan properti judul dan jumlah untuk dikelola sambil memasukkan dua input ini dan untuk input jumlah 97 00:07:09,280 --> 00:07:15,190 di sini nilai Forcett sepanjang hari sama dengan status masukan untuk elemen pertama, yang merupakan status kita saat ini 98 00:07:15,190 --> 00:07:16,420 jumlah cuplikan. 99 00:07:17,330 --> 00:07:22,640 Sekarang kita memasukkan kembali status saat ini untuk masing-masing masukan ke dalam elemen masukan. 100 00:07:23,030 --> 00:07:27,260 Tentu saja, Anda semua ingin memperbarui status saat kami mengetikkan input ini. 101 00:07:27,920 --> 00:07:31,750 Dan untuk itu, seperti yang kami lakukan, komponen ini selalu termasuk dalam komponen Berbasis Kelas. 102 00:07:32,180 --> 00:07:36,190 Kita dapat mendengarkan event on change, yang diaktifkan untuk setiap penekanan tombol. 103 00:07:36,590 --> 00:07:41,690 Dan di sana kita mendapatkan objek acara ini, beberapa hyrum yang menjalankan fungsi anonim. 104 00:07:41,690 --> 00:07:46,840 Pada akhirnya, kita mendapatkan objek event secara otomatis dan kita ingin memperbarui status kita. 105 00:07:46,850 --> 00:07:50,900 Dan seperti yang saya sebutkan, kita melakukan ini dengan elemen kedua dalam array ini. 106 00:07:51,140 --> 00:07:52,840 Penggunaan negara memberi kita kembali. 107 00:07:53,240 --> 00:07:57,140 Jadi disini kita mengakses elemen indeks satu, yang merupakan elemen kedua. 108 00:07:57,290 --> 00:08:01,440 Dan ini adalah sebuah fungsi sehingga kita dapat menjalankannya sebagai sebuah fungsi dengan menambahkan tanda kurung di sini. 109 00:08:02,150 --> 00:08:05,530 Sekarang di sini saya masukan judul, jadi saya ingin memperbarui judulnya. 110 00:08:05,540 --> 00:08:13,910 Jadi apa yang kita lakukan di sini adalah kita hanya meneruskan objek baru ke status masukan untuk memperbarui keadaan kita saat ini dengan ini 111 00:08:13,910 --> 00:08:15,140 objek negara baru. 112 00:08:15,650 --> 00:08:23,450 Dan di sana kita dapat mengatur properti judul ke nilai target acara karena kepadatan acara mengubah acara. 113 00:08:23,450 --> 00:08:28,100 Targetnya adalah kolom input kita dan properti value kemudian menyimpan nilai yang dimasukkan pengguna. 114 00:08:28,820 --> 00:08:35,090 Jadi izinkan saya memformat ulang dan sekarang mengulangi logika yang sama di sini untuk jumlahnya dan meletakkannya di sana. 115 00:08:35,150 --> 00:08:39,679 Jadi disana kami juga menambahkan perubahan, tapi tentu saja kami memperbarui bidang jumlah. 116 00:08:41,780 --> 00:08:49,680 Jadi dengan itu, jika kita menyimpannya, kita kembali ke program kita di sini dan sekarang memasuki lima tahun Appel. 117 00:08:50,330 --> 00:08:52,280 Ya, kami melihat ini secara umum berhasil. 118 00:08:52,280 --> 00:08:57,320 Kita dapat mengetik di sini, yang merupakan pertanda baik, yang berarti kita mengembalikan negara ke hal ini dengan benar 119 00:08:57,320 --> 00:08:58,010 masukan dan sebagainya. 120 00:08:58,190 --> 00:09:04,010 Namun kita selalu mendapat peringatan bahwa suatu komponen mengubah input terkontrol bertipe nomor menjadi tidak terkontrol. 121 00:09:04,610 --> 00:09:06,460 Jadi apa alasan peringatan ini? 122 00:09:06,470 --> 00:09:10,490 Apa yang salah dengan cara kita menyelamatkan negara kita di sini? 123 00:09:10,640 --> 00:09:16,280 Dan kenapa saya mendapat peringatan tentang input tipe nomor, yang merupakan input kedua kita jika saya mengetik 124 00:09:16,280 --> 00:09:17,180 ke yang pertama?